import { setToken, getToken, removeToken } from '@/utils/auth'
import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { resetRouter } from '@/router'

export default {
  namespaced: true,
  // 如果需要复用的话，为了保证数据的独立性，需要定义成函数的形式
  // 因为函数每次执行的之后返回的对象都是一个独立的内存
  // 而直接给一个对象 因为对象是引用类型 复用的时候大家都会共享数据 一处修改别的地方也会受影响
  state: {
    // 初始化token状态
    token: getToken() || '',
    // 用户资料
    userInfo: {}
  },
  mutations: {
    // 修改token状态--> 设置token
    setToken(state, payload) {
      // 把token存入vuex
      state.token = payload
      // 把token存入cookies
      setToken(payload)
    },
    // 修改用户资料
    setUserInfo(state, payload) {
      state.userInfo = payload
      // console.log('用户数据', state.userInfo)
    },
    // 清空用户资料
    removeUserInfo(state) {
      state.token = ''
      // 清空本地cookie
      removeToken()
      state.userInfo = {}
    }
  },
  actions: {
    // 清空vuex中管理的菜单数据
    // 跨模块调用mutation
    // 1.必须在action函数中调用另一个模块的mutation 因为需要ctx.commit()
    // 2.和一般的mutation函数触发不同 ctx.commit('模块名称、mutation名称', payload, {root:true})
    loginOutRemove(ctx) {
      // 重置路由系统
      resetRouter()
      ctx.commit('menus/setMenuList', [], { root: true })
    },
    // setToken的action函数
    async asyncSetToken(ctx, payload) {
      const res = await login(payload)
      ctx.commit('setToken', res)
      // action函数是可以拥有返回值的，并且action被dispatch调用之后返回的是一个promise对象
      return res
    },
    //  setUserInfo的action函数
    async asyncSetUserInfo(ctx, payload) {
      // 获取用户数据
      const res = await getUserInfo()
      // 获取用户头像
      const img = await getUserDetailById(res.userId)
      ctx.commit('setUserInfo', { ...res, ...img })
      return res
    }
  }
}

